<template>
	<el-dialog width="780px" :close-on-click-modal="false" v-model="visible" :show-close="false">
		<div id="pdfDom">
			<h2 class="title">员工请假单</h2>
			<table class="leave-table">
				<tr align="center">
					<td width="14%">姓名</td>
					<td width="16%">{{ user_name }}</td>
					<td width="14%">年级</td>
					<td width="16%">{{ user_gender }}</td>
					<td width="14%">部门</td>
					<td>{{ dept }}</td>
				</tr>
				<tr>
					<td align="center">请假类别</td>
					<td colspan="5">{{ leaveType }}</td>
				</tr>
				<tr>
					<td align="center">请假时间</td>
					<td colspan="5">{{ start }}&nbsp;&nbsp;~&nbsp;&nbsp;{{ end }}</td>
				</tr>
				<tr>
					<td align="center">请假事由</td>
					<td colspan="5">{{ leaveReason }}</td>
				</tr>
				<tr>
					<td align="center">此处签字</td>
					<td colspan="2"></td>
					<td align="center">盖章</td>
					<td colspan="3"></td>
				</tr>
			</table>

			<p class="desc">备注：学生请假期间一切责任自负，假期结束后应及时返回学校，否则按照旷工处理。</p>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="getPdf()" size="medium">下载请假单</el-button>
				<el-button size="medium" @click="cancel()">取消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
export default {
	data: function() {
		return {
			visible: false,
			htmlTitle: '员工请假单',
			user_name: null,
			user_gender: null,
			dept: null,
			leaveReason: null,
			start: null,
			end: null,
			leaveType: null
		};
	},
	methods: {
		init:function(id){
			let that=this
			that.visible=true
			that.user_name = null
			that.user_gender = null
			that.dept = null
			that.leaveReason = null
			that.start = null
			that.end = null
			that.leaveType = null
			that.$http("leave/searchLeaveById","POST",{id:id},true,function(resp){
				that.user_name = resp.user_name
				that.user_gender = resp.user_gender
				that.dept = resp.dept
				that.leaveReason = resp.leaveReason
				if (resp.leaveType == 1) {
					that.leaveType = '病假'
				} else if (resp.leaveType == 2) {
					 that.leaveType = '事假'
				}
				that.start = resp.start
				that.end = resp.end
			})
		},
		cancel:function(){
			this.visible=false
		}
	}
};
</script>

<style scoped="scoped">
.title{
	text-align: center;
	font-size: 24px;
	margin-bottom: 30px;
	margin-top: 10px;
}

.leave-table{
	border: solid 1px #333;
	/* // border-collapse: collapse; */
	border-spacing: 0;
	font-size: 14px;
	color: #333;
	width: 100%;

	td{
		border: solid 1px #333;
		padding: 15px;
		height: 38px;
		box-sizing: border-box;
	}

}
.operate{
	text-align: center;
	margin-top: 0px;
}
.el-dialog__body{
	padding-top: 10px;
}
.desc{
	margin-top: 20px;
	margin-bottom: 0;
}
#pdfDom{
	padding: 30px 40px 0px 40px;
	position: relative;
	top: -30px;
}

</style>
